import '@/App.css'
import React from 'react'
import {Routes, Route} from 'react-router-dom'
import {AuthRoute} from '@/components/AuthRoute'
import {HistoryRouter, history} from '@/utils/index'
import { lazy, Suspense} from 'react'
import { Spin } from 'antd';


const Login = lazy(() => import('@/pages/Login'))
const Layout = lazy(() => import('@/pages/Layout'))
const Home = lazy(() => import('@/pages/Home'))
const Table = lazy(() => import('@/pages/Table'))
const Operate = lazy(() => import('@/pages/Operate'))
const Details = lazy(() => import('@/pages/Details'))
const Profile = lazy(() => import('@/pages/Profile'))
const ModifyPassword = lazy(() => import('@/pages/Operate/ModifyPassword'))
const OnlineExam = lazy(() => import('@/pages/OnlineExam'))
const MarkPapers = lazy(() => import('@/pages/Operate/MarkPapers'))

class App extends React.Component {

  render () {
    return (
      <HistoryRouter history={history}>
        <div className="App">
          <Suspense
            fallback={
              <div
                style={{
                  textAlign: 'center',
                  marginTop: '35%'
                }}
              >
                <Spin tip="Loading..." />
              </div>
            }
          >
            <Routes>
                {/* 需要鉴权的路由 */}
                <Route path="/*" element={<AuthRoute>{<Layout />}</AuthRoute> }>
                      {/* 二级路由默认页面 */}
                    <Route index element={<Home />} />
                    <Route path="list/:type" element={<Table />} />
                    <Route path="operate/:type">
                        <Route path=":id" element={<Operate />} />
                        <Route path="" element={<Operate />} />
                    </Route>
                    <Route path="details/:type" element={<Details />} />
                    <Route path="profile" element={<Profile />} />
                    <Route path="modify" element={<ModifyPassword />} />
                    <Route path="online_exam" element={<OnlineExam />} />
                    <Route path="operate/mark_papers" element={<MarkPapers />} />
                </Route>
                {/* 不需要鉴权的路由 */}
                <Route path='/login' element={<Login />} />
            </Routes>
          </Suspense>
        </div>
    </HistoryRouter>
    )
  }
}


export default App
